<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="550px" :height="260" destroyOnClose>
    <Tabs tab-position="left" v-model:activeKey="activeKey" :tabBarGutter="5">
      <template v-for="item in tabList" :key="item.key">
        <TabPane :tab="item.name" forceRender>
          <component :is="item.component" v-bind="{ ...item.data, verifyType: item.key }" class="verify-content" ref="verifyRef" />
        </TabPane>
      </template>
    </Tabs>
  </BasicModal>
</template>
<script lang="ts">
  import { ref, shallowRef, defineComponent, computed } from "vue"
  import { Tabs } from "ant-design-vue"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { BasicModal, useModalInner } from "/@/components/Modal"
  import EmailVerify from "./EmailVerify.vue"
  import SmsVerify from "./SmsVerify.vue"
  import { isFunction } from "/@/utils/is"
  import { useUserStore } from "/@/store/modules/user"
  const userStore = useUserStore()
  const TabPane = Tabs.TabPane

  export default defineComponent({
    name: "VerifyModal",
    components: {
      EmailVerify,
      SmsVerify,
      BasicModal,
      TabPane,
      Tabs,
    },
    props: {
      submitCallback: { type: Function },
    },
    emits: ["register"],
    setup(props, { emit }) {
      const apiParams = ref({})
      // 暂存验证的tab
      const verifyTabs = {
        verifyPhone: {
          key: "verify_phone",
          name: "手机号验证",
          component: shallowRef(SmsVerify),
        },
        verifyEmail: {
          key: "verify_email",
          name: "邮箱验证",
          component: shallowRef(EmailVerify),
        },
      }
      const tabList = ref<any>([])

      const { prefixCls } = useDesign("verify")
      const verifyRef = ref<any>()
      const activeKey = ref("")
      const title = ref("安全验证")

      //表单赋值
      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        const verifyType = data.verifyType
        console.log("verifyType", verifyType)
        console.log("data", data)
        tabList.value = []
        apiParams.value = data.apiParams || {}
        title.value = data.title || title.value
        // data参数可选如下: toUser api apiParams

        // 过滤限制的可选验证类型, 如果不传就不限制验证的类型
        if (verifyType && verifyTabs[verifyType]) {
          tabList.value.push({ ...verifyTabs[verifyType], data: { ...data, apiParams: apiParams.value } })
        } else {
          for (const key in verifyTabs) {
            tabList.value.push({ ...verifyTabs[key], data: { ...data, piParams: apiParams.value } })
          }
        }
        activeKey.value = tabList.value.length > 0 ? tabList.value[0].key : ""

        setModalProps({ canFullscreen: false, defaultFullscreen: false, draggable: false })
      })

      const handleSubmit = async () => {
        setModalProps({ loading: true })
        try {
          const verifyData = await verifyRef.value.filter((e) => e.verifyType === activeKey.value)[0].getData()
          if (!props.submitCallback || !isFunction(props.submitCallback)) {
            console.log("submitCallback is not function")
            return
          }
          await props.submitCallback({ ...verifyData, ...apiParams.value })
          closeModal()
        } finally {
          setModalProps({ loading: false })
        }
      }
      return {
        tabList,
        registerModal,
        handleSubmit,
        title,
        verifyRef,
        prefixCls,
        activeKey,
      }
    },
  })
</script>

<style lang="less">
  .verify-content {
    margin-left: -30px;
  }
</style>
